<template>
  <div class="merchandise-management views-container">
      <choose-link ref="chooseIconLink" :config="chooseIconLinkConfig" :changeEvt="uploadIconFileChange"></choose-link>
    <choose-files ref="chooseFiless" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
   <div class="wlm-form">
      <div class="wlm-form-content">
        <el-form
          ref="platform"
          size="small"
          label-width="140px"
          class="retail-form"
          label-position="right"
        >
         <el-form-item label="首页显示分类">
             <!-- 1开2关 -->
              <el-switch inactive-value="2"  active-value="1"  v-model="formFormatData.formData.new_user_can"></el-switch>
         </el-form-item>
          <el-form-item label="首页幻灯片">
            <!-- 2021年5月10日14:26:55再一次修改需求 -->
            <!-- <choose-files
              ref="chooseFilesImg"
              :config="chooseCopyrightConfigs"
              :changeEvt="formFormatFiltersChange"
            ></choose-files> -->
            <el-button type="" @click="lunbobtn">首页幻灯片</el-button>
            <div v-for="(item,index) in formFormatData.formData.cover" :key="index" style="display:flex;">
              <div style="margin:20px 20px 0 0 ;border: 1px solid #ddd; width:350px;padding:10px 10px 10px 10px;background: #f6f7f9;position: relative;">
                  <i class="el-icon-circle-close" style="position: absolute;top:0;right:0px;" @click="delItemList(index)"></i>
                    <div style="display:flex;">
                        <div>图片:</div>
                        <!-- {{item}} -->
                         <!-- :src="item.file_path?item.file_path:`${require('@/assets/custorm_style/default_picture.png')}`" -->
                          <div>
                              <img
                            class="wlm-upload-img"
                            style="margin-left:10px;"
                           @click="uploadTrigger('chooseIcon',index, 'default')"
                            :src="item.file_path?item.file_path:`${require('@/assets/custorm_style/default_picture.png')}`"
                            >
                            <p class="form-help">建议尺寸：750*300</p>
                          </div>
                    </div>
                    <div style="display:flex;" class="pick">
                        <div>链接:</div>
                         <el-tooltip class="item" effect="dark" :content="item.link" placement="top">
                           <el-input style="width:280px;margin-left:10px;" v-model="item.link" @focus="uploadFileToggle(index)"  placeholder="请选择链接"></el-input>
                          </el-tooltip>
                        
                    </div>
              </div>
          </div>
            <!-- <div class="form-help">建议尺寸750*300</div> -->
          </el-form-item>
            <el-form-item label="文字自定义">
                <div>
                    疯抢免单：<el-input v-model="formFormatData.formData.crazy" placeholder="疯抢免单" style="width:150px;"></el-input>
                </div>
                <div>
                    好友专区：<el-input v-model="formFormatData.formData.friend" placeholder="好友专区" style="width:150px;margin-top:10px;"></el-input>
                </div>
                <div>
                    我的免单：<el-input v-model="formFormatData.formData.myfree" placeholder="我的免单" style="width:150px;margin-top:10px;"></el-input>
                </div>
                <div>
                    N人免单：<el-input  v-model="formFormatData.formData.n_myfree" placeholder="N人免单" style="width:150px;margin-top:10px;"></el-input>
                </div>
                <div>
                    免单：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input placeholder="免单"  v-model="formFormatData.formData.free" style="width:150px;margin-top:10px;"></el-input>
                </div>
                 <div>
                    免单进行中：<el-input placeholder="免单进行中"  v-model="formFormatData.formData.free_order" style="width:150px;margin-top:10px;"></el-input>
                </div>
            </el-form-item>
              <el-form-item label="是否设为首页">
             <!-- 1开2关 -->
                <el-radio-group v-model="formFormatData.formData.free_home_page">
              <el-radio label="1">设置</el-radio>
              <el-radio label="2">不设置</el-radio>
            </el-radio-group>
         </el-form-item>
          <el-form-item label="分享免单描述">
            <el-input v-model="formFormatData.formData.describe" placeholder="请输入分享免单描述" style="width:250px;"></el-input>
         </el-form-item>
          <el-form-item label="分享图片">
            <choose-files
              ref="chooseFilesImg"
              :config="chooseCopyrightConfigsnew"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <!-- <div class="form-help">建议尺寸750*300</div> -->
          </el-form-item>
             <el-form-item>
            <div class="footBtn">
              <el-button @click="$router.back(-1)">返回</el-button>
               <el-button size="small"  @click="formFormatSubmit({ router: { type: 'replace', path: '/application/freeofCharge', code: 1 }})" type="primary">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import ChooseFiles from "@/components/ChooseFiles/index";
import ChooseLink from '@/components/ChooseLink/index'
import { setFree,getFreeSet } from "@/api/freeofcharge";
import mixins from "@/mixins/mixins";
export default {
  mixins: [mixins.getters("Form")],
  name: "freeoSet",
  components: {
    ChooseFiles,
    ChooseLink
  },
  
  data() {
    return {
      index:0,
        chooseCopyrightConfigs: {
    type: ["image"],
    model: "display",
    uploadConfig: {
      limit: 5,
      isMore: true,
      model: "display",
    },
    initList: [],
    isShowList: true,
    file_type: "image",
    bindKey: {
      key: "cover",
      model: "img",
    },
  },
  chooseCopyrightConfigsnew: {
    type: ["image"],
    model: "display",
    uploadConfig: {
      limit: 1,
      isMore: true,
      model: "display",
    },
    initList: [],
    isShowList: true,
    file_type: "image",
    bindKey: {
      key: "image",
      model: "img",
    },
  },
   chooseIconLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '1'
      },
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image'
      },
        formFormatData: {
        key: ["platform"],
        api: {
          editForm: {
            api: getFreeSet,
            params: {
              always: true,
            },
            filters: {
              img: {
                bindInit: ['chooseCopyrightConfigs','chooseCopyrightConfigsnew'],
              },
            },
          },
          submitForm: setFree
        },
        formData: {
          describe:'',
            new_user_can:1,
            free_home_page:"2",
            cover:[{
              link: '',
              file_path:''
            }],
            image:[],
            crazy:'疯抢免单',
            friend:'好友专区',
            myfree:'我的免单',
            n_myfree:'N人免单',
            free:'免单',
            free_order:'免单进行中',
        },
      },
    }
  },
  methods: {
       delItemList(index){
      this.formFormatData.formData.cover.splice(index,1)
    },
    lunbobtn(){
      this.formFormatData.formData.cover.push({link:'',file_path:''})
    },
    //链接打开
    uploadFileToggle(index) {
      this.index = index
      console.log("4111144444444",index)
      this.$refs.chooseIconLink.toggle()
    },
    //图片打开
    uploadTrigger(evt, index, model) {
      console.log('chooseUrl++++++++++++++', evt, index, model)
      if(evt == 'chooseIcon'){
         this.index = index
        this.$refs.chooseFiless.toggle()
      }
     
    },
    //链接回调
    uploadIconFileChange(files) {
      const { currentRow: [file_path],displayData: [{  path}]} = files
      if (file_path ||   path) {
        const index = this.index
        console.log(file_path, 'file_path+++++')
        console.log(  path, 'path+++++')
        console.log("123132121",this.formFormatData.formData)
        // this.formFormatData.formData.cover.map(res=>{
        //   res.link = file_path
        // })
         if(!!this.formFormatData.formData.cover[index].link){
            Object.defineProperty(this.formFormatData.formData.cover[index],'link',{
              value:'',
              writable:true,
              enumerable:true,
              configurable:true,
            });
         }
         this.formFormatData.formData = {...this.formFormatData.formData}
         this.formFormatData.formData.cover[index].link = file_path ||  path

      } else {
        this.$message.error('请选择链接~!')
      }
    },
    //图片回调
    uploadFileChange(files) {
      const index = this.index
      console.log('sssssssssssssssssssssssssssssssssss',files)
      const { key } = files
      const { displayData: [file_path] } = files
        if (this.current !== -1 && file_path) {
         this.formFormatData.formData.cover[index].file_path = file_path.file_path
         this.formFormatData.formData.cover = [...this.formFormatData.formData.cover]
          console.log("8888888888888888888888",this.formFormatData.formData.cover[index].file_path)

        }
    },
     formFormatFiltersChange(data) {
      console.log("5555",data.displayData)
        console.log("jjjssssdffff",this.formFormatData.formData)
         this.formFormatData.formData.share_image_id = data.displayData
      
    },
  }
}
</script>
<style lang="scss" scoped>
.form-help {
  font-size: 12px;
  color: #999999;
}
.footBtn {
  width: 100%;
  text-align: center;
}
.pick{
    margin-top: 20px;
    /deep/ .el-input__inner{
        background: #e8effc;
    }
}
</style>